﻿<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8" />
        <title>商品分类</title>
        <style type="text/css">
            body,div,dl,dt,dd{
                margin: 0px;
                padding: 0px;
            }
            body{
                background: #d5d5d5;
            }
            div{
                width: 300px;
                margin: 0px auto;
                background: #ffffff;
            }
            dl{
                color: #ffffff;
                line-height: 30px;
                height: 30px;
                font-size: 20px;
                font-weight: 700;
                background: #000000;
                text-indent: 1em;
            }
/*
            dt,dd{
                
                border: 1px solid;
            }
*/
            dt{
                font-size: 16px;
                font-weight: 700;
                box-sizing: border-box;
                padding-left: 2em;
                line-height: 30px;
                height: 30px;
            }
            dd{
                font-size: 12px;
                color: #666666;
                padding-left: 32px;
                line-height: 20px;
                height: 20px;
            }
            .dd1{
                border-bottom: 1px dashed #666666;
            }
            .dt1{
                background: url(icon_01.gif) no-repeat 4px center;
                background-position : 
            }
            .dt2{
                background: url(icon_02.gif) no-repeat 4px center;
                background-position : 
            }
            .dt3{
                background: url(icon_03.gif) no-repeat 4px center;
                background-position : 
            }
            .dt4{
                background: url(icon_04.gif) no-repeat 4px center;
                background-position : 
            }
            .dt5{
                background: url(icon_05.gif) no-repeat 4px center;
                background-position : 
            }
            .dt6{
                background: url(icon_06.gif) no-repeat 4px center;
                background-position : 
            }
            .dt7{
                background: url(icon_07.gif) no-repeat 4px center;
                background-position : 
            }
            .dt8{
                background: url(icon_08.gif) no-repeat 4px center;
                background-position : 
            }
            .dt9{
                background: url(icon_09.gif) no-repeat 4px center;
                background-position : 
            }
            .l1{
                color: black;
                text-decoration: none;
            }
            .l1:hover{
                color: orange;
            }
            .l2{
                color: #666666;
                text-decoration: none;
            }
            .l2:hover{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            <dl>全部分类</dl>
                <dt class="dt1"><a href="#" class="l1">护肤</a></dt>
                    <dd><a href="#" class="l2">洁面</a> <a href="#" class="l2">化妆水</a> <a href="#" class="l2">喷雾</a> <a href="#" class="l2">美容液</a> <a href="#" class="l2">眼霜</a></dd>
                    <dd><a href="#" class="l2">眼部精华</a> <a href="#" class="l2">眼膜</a> <a href="#" class="l2">面膜</a> <a href="#" class="l2">面膜贴</a></dd>
                    <dd><a href="#" class="l2">水洗面膜</a> <a href="#" class="l2">免洗面膜</a> <a href="#" class="l2">精华</a> <a href="#" class="l2">精油</a></dd>
                    <dd class="dd1"><a href="#" class="l2">凝露</a> <a href="#" class="l2">乳液</a> <a href="#" class="l2">面霜</a> <a href="#" class="l2">日霜</a> <a href="#" class="l2">晚霜</a></dd>
                <dt class="dt2"><a href="#" class="l1">彩妆</a></dt>
                    <dd><a href="#" class="l2">卸妆</a> <a href="#" class="l2">防晒</a> <a href="#" class="l2">隔离</a> <a href="#" class="l2">BB霜</a> <a href="#" class="l2">粉底</a> <a href="#" class="l2">粉饼</a></dd>
                    <dd><a href="#" class="l2">睫毛膏</a> <a href="#" class="l2">眼影</a> <a href="#" class="l2">唇彩</a> <a href="#" class="l2">腮红</a> <a href="#" class="l2">眼线笔</a></dd>
                    <dd class="dd1"><a href="#" class="l2">底妆</a> <a href="#" class="l2">遮瑕</a> <a href="#" class="l2">蜜粉</a> <a href="#" class="l2">眉笔</a> <a href="#" class="l2">美甲</a></dd>
                <dt class="dt3"><a href="#" class="l1">香氛</a></dt>
                    <dd class="dd1"><a href="#" class="l2">男香</a> <a href="#" class="l2">女香</a> <a href="#" class="l2">小Q装</a> <a href="#" class="l2">中性香水</a></dd>
                <dt class="dt4"><a href="#" class="l1">身体护理</a></dt>
                    <dd><a href="#" class="l2">洗发</a> <a href="#" class="l2">护发</a> <a href="#" class="l2">沐浴</a> <a href="#" class="l2">身体乳</a> <a href="#" class="l2">手足护理</a></dd>
                    <dd><a href="#" class="l2">护手霜</a> <a href="#" class="l2">纤体</a> <a href="#" class="l2">身体精油</a> <a href="#" class="l2">颈部护理</a></dd>
                    <dd class="dd1"><a href="#" class="l2">个人护理</a> <a href="#" class="l2">卫生用品</a> <a href="#" class="l2">脱毛</a></dd>
                <dt class="dt5"><a href="#" class="l1">礼盒套装</a></dt>
                    <dd><a href="#" class="l2">护肤套装</a> <a href="#" class="l2">身体护理套装</a> <a href="#" class="l2">彩妆套装</a></dd>
                    <dd class="dd1"><a href="#" class="l2">旅行装</a> <a href="#" class="l2">香水套装</a> <a href="#" class="l2">男士套装</a></dd>
                <dt class="dt6"><a href="#" class="l1">美容工具</a></dt>
                    <dd><a href="#" class="l2">护肤</a> <a href="#" class="l2">彩妆</a> <a href="#" class="l2">美发</a> <a href="#" class="l2">美体</a> <a href="#" class="l2">美甲</a></dd>
                    <dd class="dd1"><a href="#" class="l2">美容仪器</a> <a href="#" class="l2">其他美容工具</a></dd>
                <dt class="dt7"><a href="#" class="l1">母婴专区</a></dt>
                    <dd class="dd1"><a href="#" class="l2">奶粉</a> <a href="#" class="l2">尿裤湿巾</a> <a href="#" class="l2">母婴洗护</a></dd>
                <dt class="dt8"><a href="#" class="l1">男士专区</a></dt>
                    <dd><a href="#" class="l2">洁面</a> <a href="#" class="l2">爽肤水</a> <a href="#" class="l2">面霜</a>  <a href="#" class="l2">男香</a></dd>
                    <dd class="dd1"><a href="#" class="l2">眼霜</a> <a href="#" class="l2">凝胶</a> <a href="#" class="l2">乳液</a> <a href="#" class="l2">精华</a> <a href="#" class="l2">沐浴</a></dd>
                <dt class="dt9"><a href="#" class="l1">食品保健</a></dt>
                    <dd><a href="#" class="l2">瘦身类</a> <a href="#" class="l2">保健类</a> <a href="#" class="l2">美容类</a> <a href="#" class="l2">食品类</a></dd> 
        </div>
    </body>
</html>